<template>
	<view class="user-promote">
		<block v-if="show">
			<view class="user-promote-tabs">
				<u-tabs
					:list="tabList"
					:current="tabIndex"
					@change="tabChange"
					:is-scroll="false"
					inactive-color="#666"
					active-color="#141414"
					font-size="28">
				</u-tabs>
			</view>
			<view class="user-promote-list">
				<u-waterfall v-model="list" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="user-promote-item" v-for="(data, index) in leftList" :key="index" @click="createdPoster(data)">
							<image :src="data.image" class="bg" mode="widthFix"></image>
							<image :src="data.user.qrcode" class="code"></image>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="user-promote-item" v-for="(data, index) in rightList" :key="index" @click="createdPoster(data)">
							<image :src="data.image" class="bg" mode="widthFix"></image>
							<image :src="data.user.qrcode" class="code"></image>
						</view>
					</template>
				</u-waterfall>
			</view>
			<pt-nothing
				:text="'暂无'+ name +'海报'"
				:fixed="true"
				v-if="noMore && !list.length"
				top="80"
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '邀请好友',
				show: false,
				noMore: false,
				tabIndex: 1,
				tabList: [],
				type: 2,
				list: []
			};
		},
		watch: {
			tabIndex(newValue,oldValue){
				switch (Number(newValue)){
					case 0:
						this.name = '邀请好友'
						break;
					case 1:
						this.name = '产品推广'
						break;
					case 2:
						this.name = '套餐推广'
						break;
				}
			}
		},
		onLoad() {
			this.getTabs()
		},
		methods: {
			init(){
				let data = {
					limit: 100,
					store_id: 1,
					type: this.type
				}
				this.$u.apiWei.PosterLists(data).then(res => {
					this.show = true
					if(res.datas.length){
						this.list = res.datas
					}else{
						this.noMore = true
					}
				})
			},
			getTabs(){
				this.$u.api.PosterGetClass().then(res => {
					this.tabList = res.datas
				}).then(() => {
					this.init()
				})
			},
			tabChange(e){
				this.tabIndex = e
				this.type = e+1
				this.list = []
				this.noMore = false
				this.$refs.uWaterfall.clear()
				this.init()
			},
			createdPoster(data){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-promote/user-created-poster?url='+data.image+'&qrcode='+data.user.qrcode
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-promote-tabs{
		border-bottom: solid 2rpx #F8F8F8;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	
	.user-promote-list{
		padding: 80rpx 30rpx 30rpx;
		/deep/ .u-column:first-child{
			margin-right: 30rpx;
		}
	}
	
	.user-promote-item{
		width: 100%;
		position: relative;
		margin-top: 40rpx;
		image.bg{
			width: 100%;
			border-radius: 8rpx;
		}
		image.code{
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 8rpx;
		}
	}
</style>
